<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS -->
    <!--[if lt IE 9]>
    <script src="../../js/flot/excanvas.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">

    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- file-input -->
    <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css"/>
    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css"/>
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css"/>
    <!-- datatable -->
    <link rel="stylesheet" href="../../js/datatables/datatable.css">
    <!-- WIZARD -->
    <link rel="stylesheet" type="text/css" href="../../js/bootstrap-wizard/wizard.css"/>
    <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
    <!-- FONTS
<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
    <!-- JQUERY -->
    <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
    <script src="../../js/common.js"></script>
</head>

<body>
<header class="navbar clearfix" id="header">
</header>

<!-- PAGE -->
<section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
        <div class="sidebar-menu nav-collapse">

            <!-- SIDEBAR MENU -->
            <ul>

            </ul>
            <!-- /SIDEBAR MENU -->
        </div>

    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">
        <div class="modal fade" id="productpack_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width: 1000px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">选择商品</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row" style="height:auto">
                            <label class="control-label col-md-3">产品名称：</label>
                            <div class="col-md-8 inline">
                                <input type="text" class="form-control width-50" name="q" placeholder="请输入产品名称"/>
                                <a class="btn btn-primary searchProduct">查询</a>
                            </div>

                        </div>
                        <div class="form-group" style="height:auto">
                            <table id="productpack_product" cellpadding="0" cellspacing="0" border="0"
                                   class="datatable table table-striped table-bordered table-hover">


                            </table>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                    </div>
                </div>
            </div>
        </div>
        <!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
        <div class="container">
            <div class="row">
                <div id="content" class="col-lg-12">
                    <!-- PAGE HEADER-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-header">
                                <!-- STYLER -->

                                <!-- /STYLER -->
                                <!-- BREADCRUMBS -->
                                <ul class="breadcrumb">
                                    <li>
                                        <i class="fa fa-home"></i>
                                        <a href="index.html">首页</a>
                                    </li>
                                    <li>
                                        <a href="#">商品管理</a>
                                    </li>
                                    <li>维护商品</li>
                                </ul>
                                <!-- /BREADCRUMBS -->

                            </div>
                        </div>
                    </div>
                    <!-- /PAGE HEADER -->
                    <!-- SAMPLE -->
                    <form id="form_promotion">
                        <div class="row col-md-12">
                            <div class="box border primary" style="margin-left: 20px;">
                                <div class="box-title">
                                    <h4><i class="fa fa-bars"></i>促销设置</h4>
                                </div>
                                <div class="box-body big" style="padding:10px;">

                                    <div class="row mrg-bt10-right product_list">
                                        <label class="control-label col-md-2"><span class="required">*</span>组合装商品：</label>
                                        <div class="col-md-8 inline" style="padding-left: 0px;">
                                            <div class="col-sm-4">
                                                <div class="col-sm-1">
                                                    <a class="btn btn-primary search">查询</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 product_list">
                                            <div class="box border orange">
                                                <!--<div class="box-title" style="text-align:left">-->
                                                <!--<h6 style="margin-top: 4px;">已选商品</h6>-->
                                                <!--</div>-->
                                                <div class="box-body">
                                                    <table id="td_selectproduct" style="text-align: left" cellpadding="0" cellspacing="0" border="0"
                                                           class="datatable table table-striped table-bordered table-hover">
                                                        <thead>
                                                        <tr style="text-aglin:center">
                                                            <th>商品编码</th>
                                                            <th>商品名称</th>
                                                            <th>颜色</th>
                                                            <th>sku编码</th>
                                                            <th>尺码</th>
                                                            <th class="productCode">操作</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr class="empty">
                                                            <td colspan=6>请选择组合装商品</td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mrg-bt10-right sub_product_list">
                                        <label class="control-label col-md-2"><span class="required">*</span>组合装明细：</label>
                                        <div class="col-md-8 inline" style="padding-left: 0px;">
                                            <div class="col-sm-4">
                                                <div class="col-sm-1">
                                                    <a class="btn btn-primary addSubSku">新增明细</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 product_list">
                                            <div class="box border orange">
                                                <!--<div class="box-title" style="text-align:left">-->
                                                <!--<h6 style="margin-top: 4px;">已选商品</h6>-->
                                                <!--</div>-->
                                                <div class="box-body">
                                                    <table id="td_sub_product" cellpadding="0" cellspacing="0" border="0"
                                                           class="datatable table table-striped table-bordered table-hover">
                                                        <thead>
                                                        <tr style="text-aglin:center">
                                                            <th>商品名称</th>
                                                            <th>sku编码</th>
                                                            <th>数量</th>
                                                            <th class="productCode">操作</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="row" style="height: 30px;">
                        <div class="col-md-12" style="text-align: center;">
                            <div class="box ">
                                <a href="#" class="btn btn-success config bt-submit" style="width: 100px">
                                    保存
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- /SAMPLE -->

            <div class="footer-tools">
								<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
            </div>
        </div>
        <!-- /CONTENT-->
    </div>
    </div>
    </div>
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->

<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
<!--bootbox-->
<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
<!-- spinner -->
<script src="../../js/spinner/spin.js"></script>
<!-- INPUT MASK -->

<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
<!-- DATA TABLES -->
<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>


<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>

<script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
<script src="../../js/jquery-validate/jquery.validate.min.js"></script>
<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>

<script src="../../js/Sortable.min.js"></script>
<script>
    var AddPromotion = function () {
        var wizform = $('#form_promotion');
        var id, skuId, flag;
        var $mainDataTable = null;
        var formValiInit = function () {
            wizform.validate({
                doNotHideMessage: true,
                errorClass: 'error-span',
                errorElement: 'span',
                rules: {
                    promotionTitle: {
                        required: true
                    },
                    limitPrice: {
                        required: true
                    },
                    discountPrice: {
                        required: true
                    }
                },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-success').addClass('has-error');
                },

                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },
                success: function (label) {
                    if (label.attr("for") == "gender") {
                        label.closest('.form-group').removeClass('has-error').addClass('has-success');
                        label.remove();
                    } else {
                        label.addClass('valid')
                            .closest('.form-group').removeClass('has-error').addClass('has-success');
                    }
                }
            });
        };

        var searchProduct = function () {
            var productName = $("input[name=q]").val();
            if (productName === "")
                return;
            var url = App.getContextPath() + "admin/product/getBasicDataList.do?productName=" + productName;
            if (id && id.length > 0) {
                url += "&promotionId=" + id;
            }

            if ($mainDataTable) {
                $mainDataTable.api().ajax.url(url).load();
                return;
            }
            var dtSetting = $.dataTableSetting({
                "ajaxSource": url,
                "serverSide": true,
                "bFilter": false,// 去掉搜索框
                "bLengthChange": true,// 每页显示数量
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "iDisplayLength": 100,
                "paging": false,

                "bSort": false,
                "aoColumns": [
                    {
                        "mDataProp": "productId",
                        "sTitle": "商品id",
                        "class": "hide",
                        "width": "5%"
                    }, {
                        "mDataProp": "skuId",
                        "sTitle": "skuId",
                        "class": "hide",
                        "width": "5%"
                    }, {
                        "mDataProp": "productCode",
                        "sTitle": "商品编码",
                        "width": "5%"
                    }, {
                        "mDataProp": "packTitle",
                        "sTitle": "产品名称",
                        "width": "60%",
                        "render": function (data, type, row) {
                            return "<div style='display: inline-flex'><div><img width=50 height=50 src=" + row.mainImageUrl + "></div>" +
                                "<div><a href='" + App.getDomain() + "/product/product.html?productId=" + row.productId + "' target='_blank'>" + row.productName + "</a></div></div>";

                        }
                    }
                    , {
                        "sTitle": "颜色",
                        "mDataProp": "shortName",
                        "width": "15%"
                    }, {
                        "mDataProp": "skuCode",
                        "sTitle": "skuCode",
                        "width": "5%"
                    }, {
                        "mDataProp": "sizeName",
                        "sTitle": "尺码",
                        "width": "6%"
                    }, {
                        "sTitle": "操作",
                        "width": "15%",
                        "render": function (data, type, row) {
                            return "<a class='btn btn-success btn-add btn-width'  href='javascript:;'>加入已选</a>";

                        }

                    }]
            });

            $mainDataTable = $("#productpack_product").dataTable(dtSetting);
        }

        var removeSelect = function () {
            if ($(this).attr("pstatus") != "join") {
                //将当前行增加从已选列表删除
                $(this).closest("tr").remove();

            }
        }

        var selectSku = function () {
            $("#productpack_detail").modal("show");
            $(".searchProduct").off("click").click(searchProduct);
            $("#productpack_product").off("click").on("click", ".btn-add", function () {
                var tr = $(this).closest("tr");
                var id = $(tr).find("td:eq(0)").html();
                var skuId = $(tr).find("td:eq(1)").html();
                var productCode = $(tr).find("td:eq(2)").html();
                var productName = $(tr).find("td:eq(3)").html();
                var color = $(tr).find("td:eq(4)").html();
                var skuCode = $(tr).find("td:eq(5)").html();
                var sizeName = $(tr).find("td:eq(6)").html();
                paddingSku(id, skuId, productCode, productName, color, skuCode, sizeName);
                $(tr).remove();
            });
        }
        var paddingSku = function (id, skuId, productCode, productName, color, skuCode, sizeName) {
            var productTr = "<tr class='join'>"
            productTr += "<td hidden>" + id + "</td>"
            productTr += "<td hidden>" + skuId + "</td>"
            productTr += "<td>" + productCode + "</td>"
            productTr += "<td>" + productName + "</td>"
            productTr += "<td>" + color + "</td>"
            productTr += "<td>" + skuCode + "</td>"
            productTr += "<td>" + sizeName + "</td>"
            productTr += "<td><a class='btn btn-danger bt-join ' productId=" + id + " pstatus=\"nojoin\" ><i class='fa fa-pencil-square-o'></i>取消</a></td>"
            productTr += "</tr>"

            $("#td_selectproduct").find("tbody").html(productTr);
        }
        var addSubSku = function () {
            if ($("#td_selectproduct tbody").find(".join").length === 0) {
                $.alert("请选择组合装套餐。");
                return;
            }
            var str = "<tr class='join'>" +
                "<td hidden><input/></td>" +
                "<td><input  placeholder=\"请输入商品名称\"/></td>" +
                "<td><input  placeholder=\"请输入sku编码\"/></td>" +
                "<td><input onkeypress=\"return $.IsDecimal(event);\" onblur=\"return $.IsMoney(this);\"" +
                "onfocus=\"this.select()\" onmouseover=\"this.onfocus()\" placeholder=\"请输入数量\"/></td>";
            str += "<td><a class='btn btn-danger bt-join '   pstatus=\\\"nojoin\\\" ><i class='fa fa-pencil-square-o'></i>取消</a></td>"
            str += "</tr>"
            $("#td_sub_product").find("tbody").append(str);
        }

        var paddingSubSku = function (id, productName, subSkuCode, quantity) {
            var str = "<tr class='join'>" +
                "<td hidden><input value='" + id + "'/></td>" +
                "<td><input  placeholder=\"请输入商品名称\" value='" + productName + "'/></td>" +
                "<td><input  value='" + subSkuCode + "' placeholder=\"请输入sku编码\"/></td>" +
                "<td><input value='" + quantity + "' onkeypress=\"return $.IsDecimal(event);\" onblur=\"return $.IsMoney(this);\"" +
                "onfocus=\"this.select()\" onmouseover=\"this.onfocus()\" placeholder=\"请输入数量\"/></td>";
            str += "<td></td>"
            str += "</tr>"
            $("#td_sub_product").find("tbody").append(str);
        }

        var save = function () {
            var sku_tr = $("#td_selectproduct tbody").find(".join");
            console.log(sku_tr)
            if (sku_tr.length === 0) {
                $.alert("请选择组合装套餐。");
                return;
            }
            var sub_sku_tr = $("#td_sub_product tbody").find(".join");
            if (sub_sku_tr.length === 0) {
                $.alert("请添加组合装明细。");
                return;
            }
            var pId = sku_tr.find("td:eq(0)").html();
            var skuId = sku_tr.find("td:eq(1)").html();
            var skuCode = sku_tr.find("td:eq(5)").html();

            var arr = [];
            for (var i = 0; i < sub_sku_tr.length; i++) {
                var id = $.getUrlParam("id");
                var subId = null;
                if (id != null) {
                    subId = sub_sku_tr.eq(i).find("td:eq(0) input").val();
                }
                var name = sub_sku_tr.eq(i).find("td:eq(1) input").val().trim();
                var subSkuCode = sub_sku_tr.eq(i).find("td:eq(2) input").val().trim();
                var quantity = sub_sku_tr.eq(i).find("td:eq(3) input").val().trim();
                if (name === "" || subSkuCode === "" || quantity === "" || quantity === 0) {
                    $.alert("请输入组合装明细");
                    return;
                }

                var skuCombination = {};
                skuCombination.id = subId;
                skuCombination.productId = pId;
                skuCombination.skuId = skuId;
                skuCombination.skuCode = skuCode;
                skuCombination.name = name;
                skuCombination.subSkuCode = subSkuCode;
                skuCombination.quantity = quantity;
                skuCombination.salePrice = 0;
                arr.push(skuCombination)
            }

            url = App.getContextPath() + "admin/skuCombination/edit.do?platformNo=1";
            $.ajax({
                type: "post",
                url: url,
                async: true,
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(arr),
                success: function (result) {
                    console.log(result);
                    if (result.success) {
                        location.href = "list.html";

                    } else {
                        $.alert(result.msg)
                    }
                }
            });
        }

        var getInfo = function () {
            url = App.getContextPath() + "admin/skuCombination/findSkuCombinationInfo.do";
            $.ajax({
                type: "get",
                url: url,
                async: true,
                data: {skuId: skuId},
                success: function (result) {
                    console.log(result);
                    if (result.success) {
                        var sku = result.data.sku;
                        paddingSku(sku.productId, sku.skuId, sku.productCode,
                            sku.productName, sku.shortName, sku.skuCode, sku.sizeName);
                        result.data.skuCombinationList.forEach(item => {
                            paddingSubSku(item.id, item.name, item.subSkuCode, item.quantity
                    )
                        ;
                    })
                        ;

                    } else {
                        $.alert(result.msg)
                    }
                }
            });
        }

        return {
            init: function () {
                App.init();
                formValiInit();
                $(".product_list").on("click", ".bt-join", removeSelect);
                flag = $.getUrlParam("flag");
                id = $.getUrlParam("id");
                skuId = $.getUrlParam("skuId");
                $(".bt-submit").click(save);
                if (id != null) {
                    getInfo();
                }
                $(".addSubSku").click(addSubSku);
                //选择商品
                $(".search").click(selectSku);

            }
        }
    }();
    $(function () {
        $("#header").load("../head.html");
        AddPromotion.init();
    });
</script>

<!-- /JAVASCRIPTS -->
</body>

</html>